<template>
  <div class="question-consumer">
    <el-scrollbar style="height: 80%" class="el-scrollbar__wrap">
      <div class="questions">
        <el-form
          ref="answerForm"
          label-width="25px"
        >
          <h3 class="title">问卷填写</h3>
          <!-- 循环后端给你的所有题 -->

          <div
            v-for="(item, index) in questionList"
            :key="index"
          >
            <!-- 1 单选 -->
            <!-- 2 判断 -->
            <!-- 3 多选 -->
            <!-- 4 简答 -->
            <div style="margin-left: 25px">

              <!-- 题目的信息 -->

              <p style="font-weight: 700;margin-top: 30px">
                <span style="color:red;" v-if="item.pno === 0">*</span>第{{ item.questionNo }}题：{{
                  item.questionContent
                }}
                <span v-if="item.questionType === 1">（单选）</span>
                <span v-if="item.questionType === 2">（判断）</span>
                <span v-if="item.questionType === 3">（多选）</span>
                <span v-if="item.questionType === 4">（简答）</span>
              </p>
            </div>

            <!-- 如果questionType 等于1 那么他是单选题 -->
            <!-- 题目绑定的值是 answerForm.answers[index]  -->

            <div v-if="item.questionType === 1" style="margin-top: 10px">
              <el-form-item label="" prop="answers">
                <el-radio-group :disabled="foldQuestions[index]" v-model="answerForm.answers[index]"
                                @change="questionShow">
                  <div v-for="choiceItem in item.choiceList" style="height: 20px">
                    <el-radio :label="choiceItem.choiceId">
                      {{ choiceItem.choiceContent }}
                    </el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
            </div>

            <!-- 如果questionType 等于2 那么他是判断题 -->
            <!-- 题目绑定的值是 answerForm.answers[index]  -->

            <div v-if="item.questionType === 2" style="margin-top: 10px">
              <el-form-item label="" prop="answers">
                <el-radio-group v-model="answerForm.answers[index]">
                  <el-radio label="对">{{ item.stSelecta }}</el-radio>
                  <el-radio label="错">{{ item.stSelectb }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <!-- 如果questionType 等于3 那么他是多选题 -->
            <!-- 题目绑定的值是 answerForm.answers[index]  -->

            <div v-if="item.questionType === 3" style="margin-top: -10px">
              <el-form-item label="" prop="answers">
                <el-checkbox-group
                  @input="change($event)"
                  v-model="answerForm.answers[index]"
                  :disabled="foldQuestions[index]"
                >
                  <div v-for="(choiceItem,index) in item.choiceList" style="height: 20px">
                    <el-checkbox :label="choiceItem.choiceId"
                                 @change="checked => checkDescShow(checked, choiceItem.choiceId)">
                      {{ choiceItem.choiceContent }}
                    </el-checkbox>
                  </div>
                  <el-input
                    v-if="item.isCheckDesc === '1'"
                    style="margin-top: 10px"
                    type="textarea"
                    :disabled="foldQuestionCheckDesc[index]"
                    v-model="answerForm.checkDescList[index]"
                  ></el-input>
                </el-checkbox-group>
              </el-form-item>
            </div>

            <!-- 如果questionType 等于4 那么他是简答题 -->
            <!-- 题目绑定的值是 answerForm.answers[index]  -->

            <div v-if="item.questionType === 4" style="margin-top: 10px">
              <el-form-item label="" prop="answers">
                <!-- <el-form-item label="活动形式"> -->
                <el-input
                  :disabled="foldQuestions[index]"
                  type="textarea"
                  v-model="answerForm.answers[index]"
                ></el-input>
              </el-form-item>
            </div>
          </div>

        </el-form>
        <div style="width:100%;text-align: center">
          <el-button :loading="loading"
                     size="medium"
                     type="primary"
                     style="width:60%"
                     @click.native.prevent="handleCommit">提交
          </el-button>
        </div>
      </div>
    </el-scrollbar>
    <!--    <div class="el-login-footer" style="width:30%;">-->
    <!--      <el-button :loading="loading"-->
    <!--                 size="medium"-->
    <!--                 type="primary"-->
    <!--                 style="width:100%;"-->
    <!--                 @click.native.prevent="handleCommit">提交</el-button>-->
    <!--    </div>-->
  </div>
</template>

<script>

import {
  consumerCommit, getChoiceByChoiceId, getChoiceCheckByChoiceId,
  getQuestionnaireByConsumerId
} from '@/api/research/questionnaire'
import store from '@/store'
import { Message } from 'element-ui'
import { exportConsumer } from '@/api/research/consumer'

export default {
  name: 'questionnaireConsumer',
  data() {
    return {
      answerForm: {
        consumerId: undefined,
        answers: [],		//每一道题的答案
        checkDescList: [],		// 多选题简答框内容
        questionIds: []	//每一道题的id
      },
      choiceSelect: [],
      // 问题列表
      questionList: [],
      loading: false,
      redirect: undefined,
      // 题目禁用状态
      foldQuestions: [],
      // 多选简答框禁用状态
      foldQuestionCheckDesc: [],
      test: false,
      // 选项
      choice: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      }
      ,
      immediate: true
    }
  },
  created() {
    // 根据url地址带的用户id获取对应题目
    this.answerForm.consumerId = parseInt(window.location.href.split('?')[1])
    this.getQuestions()

  },
  methods: {
    // getCode() {
    //   getCodeImg().then(res => {
    //     this.codeUrl = "data:image/gif;base64," + res.img;
    //     this.loginForm.uuid = res.uuid;
    //   });
    // },
    // 获取题目信息
    getQuestions() {
      getQuestionnaireByConsumerId(this.answerForm.consumerId).then(response => {
        this.questionList = response.rows
        // 初始化多选组件 如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
        for (let i = 0; i < this.questionList.length; i++) {
          this.answerForm.questionIds.push(this.questionList[i].questionId)
          // //如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
          if (this.questionList[i].questionType === 3) {
            this.answerForm.answers[i] = []
          } else {
            this.answerForm.answers[i] = undefined
          }
          if (this.questionList[i].pno === 0){
            this.foldQuestions.push(false)
          } else {
            this.foldQuestions.push(true)
          }
          this.answerForm.checkDescList[i] = undefined
          this.foldQuestionCheckDesc.push(true)
        }
      })
    },
    // 客户提交问卷
    handleCommit() {
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].pno === 0) {
          if (this.answerForm.answers[i] === [] || this.answerForm.answers[i] === undefined) {
            this.$alert('第' + i + 1 + '题未做完,带*号的题目必须全部做完才能提交!', '提示', {
              confirmButtonText: '确定'
            })
            return
          }
        }
      }
      consumerCommit(this.answerForm).then(response => {
        if (response.code === 200) {
          this.$alert('提交成功,感谢反馈!', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    //给多选框用，否则会出现一个bug，就是先点一下多选框，然后没反应，
    //然后点一下按钮或者点击下拉框后，这个多选框就高亮了
    change(e) {
      this.$forceUpdate()
    },
    // 多选题简答框是否打开
    checkDescShow(checked,choiceId){
      console.log(choiceId)
      getChoiceCheckByChoiceId(choiceId).then(response =>{
        const choice = response.data
        const index = choice.questionNo-1
        if (checked === true){
          if (choice.checkDescFlag === '1'){
            this.foldQuestionCheckDesc.splice(index,1,false)
          }
        } else {
          if (choice.checkDescFlag === '1'){
            this.foldQuestionCheckDesc.splice(index,1,true)
          }
          this.answerForm.checkDescList[index] = undefined
        }
      })
    },
    // 是否关联题目打开作答
    questionShow: function(val) {
      // 是否为关联选项(数组操作使用数组操作方法才能监控disable动态属性)
      // 通过选项id获取选项详情
      getChoiceByChoiceId(val).then(response => {
          const choice = response.data
          if (choice.relationFlag === '2') {
            // 关闭全部后续答题
            for (let i = 1; i < this.foldQuestions.length; i++) {
              this.foldQuestions.splice(i, 1, true)
            }
          } else if (choice.relationFlag === '1') {
            // 打开子题目作答功能
            for (let i = 0; i < choice.childQuestionNoList.length; i++) {
              const index = choice.childQuestionNoList[i]-1
              this.foldQuestions.splice(index, 1, false)
              // //如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
              // if (this.questionList[i].questionType === 3) {
              //   this.answerForm.answers[i] = []
              // } else {
              //   this.answerForm.answers[i] = undefined
              // }
            }

            // for (let i = 0; i < this.questionList.length; i++) {
            //   if (this.questionList[i].pno === choice.questionNo) {
            //     this.foldQuestions.splice(i, 1, false)
            //     // //如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
            //     if (this.questionList[i].questionType === 3) {
            //       this.answerForm.answers[i] = []
            //     } else {
            //       this.answerForm.answers[i] = undefined
            //     }
            //   }
            // }
          } else {
            // 关闭子题目作答功能
            for (let i = 0; i < choice.childQuestionNoList.length; i++) {
              const index = choice.childQuestionNoList[i]-1
              this.foldQuestions.splice(index, 1, true)
              //如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
              if (this.questionList[index].questionType === 3) {
                this.answerForm.answers[index] = []
              } else {
                this.answerForm.answers[index] = undefined
              }
            }

            // for (let i = 0; i < this.questionList.length; i++) {
            //   if (this.questionList[i].pno === choice.questionNo) {
            //     this.foldQuestions.splice(i, 1, true)
            //   }
            // }
          }
        }
      )
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.question-consumer {
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 100%;
  background-image: url("../../assets/images/login-background.jpg");
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.questions {
  border-radius: 6px;
  background: #ffffff;
  width: 800px;
  padding: 25px 50px 25px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 100px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}

/*隐藏横向滚动条*/
.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>
